<!--
 * @Author: wang
 * @Date: 2020-09-22 18:05:20
 * @LastEditTime: 2020-08-13 09:16:04
 * @LastEditors: wang
 * @Description: 应急调度 设置受灾点右边范围搜索按需筛选
 * @FilePath: \c-u-f\src\App.vue
-->
<template>
  <div :class="themeClass">
    <div class="right_box">
      <sethead
        v-if="displaytype == 1 || showMenu === 'dd-setting'"
        @dd="setname"
        @Coordinatesearch="Coordinatesearch"
        @drawshape="drawshape"
        :Boxselection="Boxselection"
        @pointremove="pointremove"
        @Getfocus="Getfocus"
      ></sethead>
      <div v-if="displaytype == 2" style="height: 100%">
        <div class="head_box">
          <div class="select_bj">
            <select class="search_select" @change="switchlist($event)" v-model="listshow">
              <option value="1">范围搜索</option>
              <option value="2">按需筛选</option>
            </select>
          </div>
          <div class="search_box">
            <img src="../../assets/images/search_btn2.png" class="search_icon" v-if="theme == 'dark'" />
            <img src="@/assets/images/b_search_btn2.png" class="search_icon" v-else />
            <input type="text" maxlength="6" v-model.number="keyWords" placeholder="请输入搜索范围：XX KM" class="search" />
          </div>
          <button class="ok_btn" :style="{cursor:listshow==='2'?'not-allowed':'pointer'}" @click="getlist">确定</button>
          <!-- <input type="text" class="Search_box" /> -->
        </div>

        <rangefiltering
            v-if="listshow === '1'"
            :popObj="popObj"
            :Rescueteamlist="rescueteamlist"
            :material="material"
            :Avoidingdisaster="avoidingdisaster"
            :isShowhasdj="isShowhasdj"
        ></rangefiltering>
        <filterondemand v-else @addicon="addicon1" :popObj="popObj"></filterondemand>
      </div>
    </div>
  </div>
</template>
<script>
import rangefiltering from '@/components/emergency_dispatch/range_filtering'
import filterondemand from '@/components/emergency_dispatch/filter_on_demand'
import sethead from '@/components/emergency_dispatch/set_head'
// import popup from '@/components/emergency_dispatch/pop_up'
import { mapState } from 'vuex'
import { scopeScheduleSearch } from '@/api/index.js'
export default {
  props: {
    displaytype: {
      type: Number
      // default: 2
    },
    Boxselection: {
      type: Number
    },
    showMenu: {
      type: String
    }
  },
  components: { rangefiltering,
    filterondemand,
    sethead },
  data () {
    return {
      // 1是范围搜索列表2是按需筛选列表
      listshow: '1',
      keyWords: null, // 搜索关键字
      rescueteamlist: [],
      material: [],
      avoidingdisaster: [],
      popObj: {}, // 点击详情穿过来的参数
      isShowhasdj: false // 是否只显示被调度过的点位
    }
  },
  computed: {
    ...mapState(['theme']),
    themeClass () {
      return `theme-${this.theme}`
    }
  },
  watch: {
    displaytype: {
      // 监听搜索切换
      handler (newval, oldval) {
        if (newval == 2 && this.listshow === '1' && this.popObj && Object.keys(this.popObj).length > 0 && !this.isShowhasdj) {
          // 获取 救援队/物资点/避灾点
          this.getscopeScheduleSearch()
        }
      }
    }
  },
  mounted () {
    // 点击受灾点详情的事件通知
    this.$bus.$on('szdPointDetail', res => {
      console.log(res)
      // 清空数据
      this.$emit('reomvePointRange')
      this.rescueteamlist = []
      this.material = []
      this.avoidingdisaster = []
      if (res.type === 0) {
        this.listshow = '2'
      } else {
        this.listshow = '1'
      }
      this.popObj = res
      if (res.status === 1) { // 已经调度过了
        this.keyWords = res.scheduleScope
        this.isShowhasdj = true // 只显示被调度过的点
        this.rescueteamlist = []
        let rescueteamlist = res.rescueTeamTypeList || []
        rescueteamlist.forEach(n => {
          if (n.rescueTeamList && n.rescueTeamList.length > 0) {
            n.rescueTeamList.forEach(t => {
              this.rescueteamlist.push({
                ...t
              })
            })
          }
        })
        this.material = res.suppliesList
        this.avoidingdisaster = res.settlementList
        this.$emit('getlist', this.rescueTeamList)
        this.$emit('getlist1', res.suppliesList)
        this.$emit('getlist2', res.settlementList)
        //* *************** 打开范围搜索弹窗 */
        // this.listshow = 1
        if (this.listshow === '1') {
          this.$emit('rangeSearch', this.keyWords)
        }
        this.$emit('drawRoute', res)
      } else if (this.displaytype === 2 && this.listshow === '1') {
      // init 范围数据
        this.isShowhasdj = false // 只显示被调度过的点
        this.getscopeScheduleSearch()
      }
    })
  },
  methods: {
    switchlist (event) {
      this.listshow = event.target.value
      this.$emit('switchtab', event.target.value)
    },
    setname (data) {
      this.$emit('setName', data)
    },
    Coordinatesearch (data) {
      this.$emit('setCoordinatesearch', data)
    },
    drawshape () {
      this.$emit('drawshape')
    },
    getlist () {
      if (typeof this.keyWords !== 'number') {
        this.$Message.error('请输入数字')
        this.keyWords = null
        return
      }
      if (this.listshow === '1') {
        // 点击搜索列表变成可以勾选
        this.isShowhasdj = false
        this.getscopeScheduleSearch()
        this.$emit('rangeSearch', this.keyWords)
      }
    },
    addicon1 (data, type) {
      if (type === 0) {
        this.$emit('getlist1', data, 2)
      } else if (type === 1) {
        this.$emit('getlist', data, 2)
      } else if (type === 2) {
        this.$emit('getlist2', data, 2)
      }
    },
    pointremove () {
      this.$emit('pointremove')
    },
    Getfocus () {
      this.$emit('Getfocus')
    },
    // 点击确定 修改列表数据(有范围搜索子组件调用)
    confirmBtn (rescueTeamList, suppliesList, settlementList) {
      this.$emit('reomvePointRange') // 清空之前的点位
      this.rescueteamlist = rescueTeamList
      this.material = suppliesList
      this.avoidingdisaster = settlementList
      this.$emit('getlist', rescueTeamList)
      this.$emit('getlist1', suppliesList)
      this.$emit('getlist2', settlementList)
    },
    // 获取范围搜索接口
    getscopeScheduleSearch () {
      let params = {
        affectedPointId: this.popObj.id
      }
      if (this.keyWords) {
        params.scheduleScope = this.keyWords
      } else {
        this.$Message.warning('请输入正确搜索范围')
        return
      }
      this.$emit('reomvePointRange')
      scopeScheduleSearch(params).then(res => {
        if (res.code === 200) {
          let data = res.result
          this.rescueteamlist = data.rescueTeamList || []
          this.material = data.suppliesList || []
          this.avoidingdisaster = data.settlementList || []
          this.$emit('getlist', data.rescueTeamList)
          this.$emit('getlist1', data.suppliesList)
          this.$emit('getlist2', data.settlementList)
        } else this.$Message.warning(res.message)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/index.scss';
.right_box {
  // height: 100%;
  // margin-right: 4px;
  position: relative;
  z-index: 1;
}
.head_box {
  width: 460px;
  height: 50px;
  background-size: 100% 60px;
  margin-left: auto;
  display: flex;
  box-sizing: border-box;
  padding: 10px;
  margin-top: -6px;
  @include themify($themes) {
    background: themed('head_box_bj');
  }
}
.select_bj {
  width: 112px;
  height: 41px;
  background-size: cover;
  @include themify($themes) {
    background: themed('select_bj');
  }
}
.search_select {
  width: 100px;
  height: 30px;
  outline: none;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 600;
  line-height: 24px;
  margin-left: 6px;
  border: none;
  background: none;
  appearance: none;
  margin-top: 2px;
  box-sizing: border-box;
  padding-left: 3px;
}
.theme-light .search_select {
  color: #129bff;
}
.theme-dark .search_select {
  color: #72e6ff;
}
select option {
  color: black;
}
.search_box {
  width: 240px;
  height: 30px;
  margin-left: 15px;
  position: relative;
  @include themify($themes) {
    background: themed('search_box_bj');
  }
}
.search_icon {
  position: absolute;
  top: 9px;
  left: 6px;
}
.search {
  width: 100%;
  height: 30px;
  outline: none;
  font-size: 12px;
  line-height: 24px;
  background: none;
  border: none;
  margin-left: 20px;
  @include themify($themes) {
    color: themed('search_font1');
  }
}
.ok_btn {
  width: 70px;
  height: 30px;
  text-align: center;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 30px;
  margin-left: 15px;
  border-radius: 2px;
  @include themify($themes) {
    background: themed('ok_btn');
  }
}
.theme-light .ok_btn {
  border: none;
  opacity: 1;
  color: #ffffff;
}
.theme-dark .ok_btn {
  color: #72e6ff;
  border: 1px solid #72e6ff;
  opacity: 0.6;
  cursor: pointer;
}
</style>
